<script setup lang="ts">
import {closeApi, getQrCodeApi} from "@/api/system";
import {systemInfoStore} from "@/store/modules/systemInfo";
import router from "@/router";
import {pageDefaultTitle} from '@/settings'
import {ResultEnum} from "@/enums/requestEnum";
import {onBeforeMount, ref} from "vue";
import {IconType} from "@/enums/iconEnum";

const qrCodeSvg = ref('');
const showQrDialog = ref(false)

onBeforeMount(() => {
  getQrCode();
})

const getQrCode = () => {
  getQrCodeApi({width: 100, height: 100, unit: '%'}).then(resp => {
    if (resp.respCode === ResultEnum.SUCCESS) {
      qrCodeSvg.value = resp.data;
    }
  })
}

const onClickLeft = () => {
  const _systemInfoStore = systemInfoStore();
  _systemInfoStore.systemClosed = true;
  closeApi().then(resp => {
    router.push("/close");
  })
      .catch(err => {
        console.error(err);
        router.push("/close");
      })
  ;
}

const onClickRight = (event: TouchEvent | MouseEvent) => {
  showQrDialog.value = true;
};
</script>

<template>
  <van-nav-bar fixed placeholder :title="pageDefaultTitle" left-text="关闭" @click-left="onClickLeft"
               @click-right="onClickRight">
    <template #right>
      <svg-icon class="qr-code" :name="qrCodeSvg" :type="IconType.CODE"/>
    </template>
  </van-nav-bar>
  <van-dialog v-model:show="showQrDialog" :showConfirmButton="false" :closeOnClickOverlay="true">
    <div v-html="qrCodeSvg"></div>
  </van-dialog>
</template>

<style scoped>
.qr-code {
  width: 40px;
  height: 40px;
}
</style>
